div.wrapper {
	position: relative;
	width: 1050px;
	margin:0 auto;
}

div.wrapper>ul.container {
	position: relative;
	height: 330px;
	margin: 0 auto;
	transform: translate3d(0, 0, 0)
}
div.wrapper.horizontal>ul.container {
	width: 850px
}
div.wrapper.horizontal ul.container>li.cards_list {
	width: 220px
}
div.wrapper.vertical ul.container>li.cards_list {
	display: flex
}
i.btn-direct {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 35px;
	height: 70px;
	border-radius: 0%;
	background-color: rgba(0,0,0,.7);
	opacity: 0.5;
	cursor: pointer;
	z-index: 100;
	transition: opacity ease 300ms
}
div.wrapper:hover i.btn-direct {
	opacity: .6
}
i.btn-direct:hover {
	opacity: .9!important
}
i.btn-direct.btn-left {
	left: -70px;
}
i.btn-direct.btn-right {
	right: -70px;
}
i.btn-direct>span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.2rem;
	height: 1.2rem;
	border-top: .125rem solid #fff;
	border-left: .125rem solid #fff
}
div.wrapper.horizontal i.btn-direct>span.shift-left {
	transform: translate(-30%, -50%) rotate(-45deg)
}
div.wrapper.horizontal i.btn-direct>span.shift-right {
	transform: translate(-70%, -50%) rotate(135deg)
}
div.wrapper.vertical i.btn-direct>span.shift-left {
	transform: translate(-50%, -30%) rotate(45deg)
}
div.wrapper.vertical i.btn-direct>span.shift-right {
	transform: translate(-50%, -70%) rotate(-135deg)
}